<template>
  <div id="community">
    <van-sticky>
      <van-nav-bar title="社区" :border="false">
        <template #left>
          <van-icon
            name="http://47.98.235.98:3000/images/Community/Defaultavatar.png"
            size="1rem"
          />
        </template>
        <template #right>
          <van-icon
            name="http://47.98.235.98:3000/images/Community/search.png"
            size="0.75rem"
            class="search"
          />
          <van-icon
            name="http://47.98.235.98:3000/images/Community/rightedit.png"
            size="0.6rem"
          />
        </template>
      </van-nav-bar>
      <van-tabs
        v-model:active="active"
        color="#248FF9"
        title-active-color="#248FF9"
        @click="tabList"
      >
        <van-tab v-for="item in listtitle" :title="item" :key="item"> </van-tab>

        <van-tab title-class="lasttt" :disabled="true">
          <template #title>
            <div class="wrpa">
              <div class="juxin"></div>
              <van-icon
                name="http://47.98.235.98:3000/images/Community/bankuai.png"
                class="img"
                size="0.4rem"
              />
              <span class="ban">版块</span>
            </div>
          </template>
        </van-tab>
      </van-tabs>
    </van-sticky>

    <van-list
      v-model:loading="state.loading"
      :finished="state.finished"
      finished-text="没有更多了"
      @load="onLoad"
      :offset="-10"
    >
      <div v-for="vala in state.list" :key="vala._id" class="com-list">
        <h3 class="title">{{ vala.title }}</h3>
        <div>
          <div v-if="vala.conimg.length !== 0" class="con">
            <van-image
              width="2.5rem"
              height="1.4rem"
              v-for="imgval in vala.conimg"
              :src="prefix + imgval"
              :key="imgval"
              class="conimg"
            />
          </div>
          <div v-else class="con"></div>
        </div>
        <div class="list-bom">
          <div class="box">
            <van-image
              width="0.75rem"
              height="0.75rem"
              :src="prefix + vala.userimg"
            />
            <span>{{ vala.username }}</span>
            <span>{{ vala.channel }}</span>
          </div>
          <div class="right box">
            <span>人气&nbsp;{{ vala.popularity }}</span>
            <span>评论&nbsp;{{ vala.comment }}</span>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { getCommunityApi, getNewCommunityApi } from "../../utils/api";
import { ref, reactive } from "vue";
// import { onMounted } from "vue";
export default {
  setup() {
    let curr = ref(1);
    const active = ref(0);
    const prefix = ref("");
    const state = reactive({
      loading: false,
      finished: false,
      list: [],
    });
    const listtitle = reactive(["最新热门", "最新发表", "最新回复"]);

    const onLoad = () => {
      if (active.value === 0) {
        setTimeout(async () => {
          const res = await getCommunityApi({
            curr: curr.value,
            pagesize: 4,
            token: sessionStorage.getItem("token"),
          });
          if (res.result.length == 0) {
            state.finished = true;
          } else {
            state.list.push(...res.result);
            prefix.value = res.prefix;
            state.loading = false;
            curr.value++;
          }
        }, 500);
      } else {
        setTimeout(async () => {
          const res = await getNewCommunityApi({
            curr: curr.value,
            pagesize: 4,
            token: sessionStorage.getItem("token"),
          });
          if (res.result.length == 0) {
            state.finished = true;
          } else {
            state.list.push(...res.result);
            prefix.value = res.prefix;
            state.loading = false;
            curr.value++;
          }
        }, 500);
      }
    };
    // onMounted(async () => {
    //   const res = await getCommunityApi();
    //   list.push(...res.result);
    //   prefix.value = res.prefix;
    //   curr.value++;
    // });

    const tabList = () => {
      state.list = [];
      curr.value = 1;
      state.finished = false;
      onLoad();
    };
    return {
      state,
      active,
      onLoad,
      tabList,
      prefix,
      listtitle,
    };
  },
};
</script>
<style lang="less">
#community {
  .van-nav-bar__title {
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #000000;
  }
  .van-nav-bar {
    padding: 10px 0;
    .search {
      margin-right: 15px;
    }
  }
  .wrpa {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .juxin {
    width: 4px;
    height: 40px;
    background: #999999;
    border-radius: 2px;
  }
  .lasttt {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .ban {
      font-size: 14px;
      font-weight: bold;
      color: #000000;
    }
  }
  .img {
    margin: 0 15px;
  }
  .com-list {
    padding: 15px 10px;
    width: 100%;
    border-top: 1px solid #eeeaea;
    h3 {
      font-size: 18px;
    }
    .con {
      display: flex;
      justify-content: flex-end;
      margin: 20px 0;
      .conimg {
        margin-left: 15px;
      }
    }
    .list-bom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #999999;
      .box {
        display: flex;
        justify-content: center;
        align-items: center;
      }
      span {
        margin: 0 3px;
        font-size: 14px;
      }
      .right {
        float: right;
      }
    }
  }
}
</style>
